<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XiaomiCart</title>
    <style>
        img {
            width: 96px;
            display: block;
            margin: auto;
            margin-bottom: 6px;
            margin-top: 10px;
        }

        .good {
            width: 120px;
            height: 230px;
            cursor: pointer;
            padding: 6px;
            box-shadow: 1px 1px 8px 1px rgba(49, 49, 49, 0.2);
            border-radius: 6px;
            background-color: rgb(248, 248, 248);
            margin-bottom: 16px;
        }

        .goodName {
            display: block;
            word-break: break-all;
            margin: 0;
            margin-bottom: 8px;
            padding-top: 15px;
            margin-left: 15px;
            font-size: 15px;
            font-weight: 600;
        }

        .price {
            color: rgb(255, 94, 66);
            font-weight: 600;

        }

        .container {
            width: 280px;
            display: block;
            margin: auto;
        }

        .unit:nth-child(odd) {
            float: left;
        }

        .unit:nth-child(even) {
            float: right;
        }
    </style>
</head>

<body>
<div>
    test
    test
</div>

    <div id="app">
        <div class="container">
            <h2>{{title}}</h2>
            <good-cpn v-for="(item,index) in goods" :good_name="item.gName" :img_url="item.imgUrl"
                :good_price="item.price" @given_title="show_title"></good-cpn>
        </div>
    </div>

    <script src="../js/vue.js"></script>
    <template id="good_tem">
        <div class="unit">
            <div class="good" @click="send_title">
                <img :src="img_url" alt="">
                <p class="goodName">
                    {{good_name}}
                </p>
                <span class="price">{{good_price | priceFilter}}</span>
            </div>
        </div>
    </template>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    goods: [{
                            gName: '增殖的G',
                            imgUrl: './image/23434538.jpg',
                            price: 255
                        },
                        {
                            gName: '墓穴的指名者',
                            imgUrl: './image/24224830.jpg',
                            price: 75
                        },
                        {
                            gName: '抹杀的指名者',
                            imgUrl: './image/65681983.jpg',
                            price: 150
                        },
                        {
                            gName: '访问码语者',
                            imgUrl: './image/86066372.jpg',
                            price: 270
                        },
                        {
                            gName: '灰流丽',
                            imgUrl: './image/14558128.jpg',
                            price: 240
                        }, {
                            gName: '召命之神弓',
                            imgUrl: './image/4280259.jpg',
                            price: 446
                        }, {
                            gName: '鲜花女男爵',
                            imgUrl: './image/84815190.jpg',
                            price: 210
                        }, {
                            gName: '法王兽',
                            imgUrl: './image/88581108.jpg',
                            price: 35
                        }, {
                            gName: '假面英雄 暗爪',
                            imgUrl: './image/58481572.jpg',
                            price: 10
                        }, {
                            gName: 'DDD 双晓王',
                            imgUrl: './image/15939229.jpg',
                            price: 72
                        }
                    ],
                    title: '点击商品这里会出现它的名字'
                }
            },
            methods: {
                show_title(val) {
                    this.title = val;
                }
            },
            components: {
                'good-cpn': {
                    template: '#good_tem',
                    methods: {
                        send_title() {
                            this.$emit('given_title', this.good_name)
                        }
                    },
                    props: ['good_name', 'good_price', 'img_url'],
                    filters: {
                        priceFilter(val) {
                            return '￥' + val.toFixed(2);
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>